/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: soubao-java 2020-07-22 $
 */<template>
  <div class="topnav">
    <div class="admincp-header">
      <div class="bgSelector"></div>
      <div
        class="admincp-name"
        style="background-color: #293038;"
        onclick="javascript:openItem('welcome|Index');"
      >
        <img :src="storeLogo" />
      </div>
      <div class="nc-module-menu">
        <ul>
          <router-link class="link" active-class="active" to="/index/home">
            <a>
              <img src="@/static/images/iconhead1.png" alt />首页
            </a>
          </router-link>
          <router-link class="link" active-class="active" to="/index/setup/shop_set">
            <a>
              <img src="@/static/images/iconhead2.png" alt />设置
            </a>
          </router-link>
          <router-link class="link" active-class="active" to="/index/page">
            <a>
              <img src="@/static/images/iconhead3.png" alt />页面
            </a>
          </router-link>
          <router-link class="link" active-class="active" to="/index/market">
            <a>
              <img src="@/static/images/iconhead4.png" alt />商城
            </a>
          </router-link>
          <router-link class="link" active-class="active" to="/index/order">
            <a>
              <img src="@/static/images/iconhead10.png" alt />订单
            </a>
          </router-link>
          <router-link class="link" active-class="active" to="/index/marketing">
            <a>
              <img src="@/static/images/iconhead5.png" alt />营销
            </a>
          </router-link>
          <router-link class="link" active-class="active" to="/index/distribution">
            <a>
              <img src="@/static/images/iconhead6.png" alt />分销
            </a>
          </router-link>
          <router-link class="link" active-class="active" to="/index/statistics">
            <a>
              <img src="@/static/images/iconhead9.png" alt />统计
            </a>
          </router-link>
          <router-link class="link" active-class="active" to="/index/seller/store_manage">
            <a>
              <img src="@/static/images/iconhead8.png" alt />商家
            </a>
          </router-link>
		  <router-link class="link" active-class="active" to="/index/jobs/dashboard">
		    <a>
		      <i class="el-icon-cpu" />调度中心
		    </a>
		  </router-link>
          <!-- <li data-param="notice"><a href="javascript:void(0);">系统公告</a></li>-->
        </ul>
      </div>

      <!--
    <div class="bagd-smpname">
    	<span>小程序之家</span>
        [ <em>高级电商版</em> ]
        <b>
        	<img class="smcode" src="../../../..@/static/images/bgd-smcoode.png" alt="">
            <i class="bigcode"><img src="../../../..@/static/images/code.png" alt=""></i>
        </b>
    </div>
      -->
      <div class="admincp-header-r">
        <el-dropdown style="display: inline-block; margin-top: 20px; margin-right: 5px;">
          <span class="el-dropdown-link">
            消息
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-badge class="mark" :value="message_count > 999 ? '···' : message_count" />
          <el-dropdown-menu style="width: 160px; background-color: #1c2024;" slot="dropdown">
            <el-collapse>
              <el-collapse-item>
                <template slot="title">
                  商品提示
                  <el-badge class="mark" :value="goods_msg_count > 999 ? '···' : goods_msg_count" />
                </template>
                <router-link :to="{name:'goods',params:{goodsState:0}}">
                  <a href="javascript:void(0)">待审核商品({{goods_report.wait_auth_count}})</a>
                </router-link>
                <br />
                <router-link :to="{name:'refund_order'}">
                  <a href="javascript:void(0)">退款单({{order_report.wait_refund_count}})</a>
                </router-link>
                <br />
                <router-link :to="{name:'return',params:{status:0}}">
                  <a href="javascript:void(0)">售后退货({{return_goods_report.wait_refund_count}})</a>
                </router-link>
                <br />
              </el-collapse-item>
              <el-collapse-item>
                <template slot="title">
                  商家审核提示
                  <el-badge
                    class="mark"
                    :value="seller_msg_count > 999 ? '···' : seller_msg_count"
                  />
                </template>
                <router-link :to="{name:'store_applys'}">
                  <a href="javascript:void(0)">开店申请({{store_apply_count}})</a>
                </router-link>
                <br />
                <router-link :to="{name:'reopen_list'}">
                  <a href="javascript:void(0)">签约申请({{store_reopen_count}})</a>
                </router-link>
                <br />
                <router-link :to="{name:'apply_class_list'}">
                  <a href="javascript:void(0)">经营类目申请({{store_bind_class_count}})</a>
                </router-link>
                <br />
                <router-link :to="{name:'store_withdrawals'}">
                  <a href="javascript:void(0)">商家提现申请({{store_withdrawals_count}})</a>
                </router-link>
                <br />
              </el-collapse-item>
              <el-collapse-item>
                <template slot="title">
                  会员提醒
                  <el-badge class="mark" :value="user_msg_count > 999 ? '···' : user_msg_count" />
                </template>
                <router-link :to="{name:'user_withdrawals'}">
                  <a href="javascript:void(0)">会员提现申请({{user_withdrawals_count}})</a>
                </router-link>
                <br />
                <router-link :to="{name:'complains',params:{state:1}}">
                  <a href="javascript:void(0)">投诉提醒({{complain_count}})</a>
                </router-link>
                <br />
                <router-link :to="{name:'expose',params:{state:1}}">
                  <a href="javascript:void(0)">举报提醒({{expose_count}})</a>
                </router-link>
                <br />
              </el-collapse-item>
              <el-collapse-item>
                <template slot="title">
                  活动提醒
                  <el-badge class="mark" :value="activity_count > 999 ? '···' : activity_count" />
                </template>
                <router-link :to="{name:'flash_sale',params:{status:0}}">
                  <a href="javascript:void(0)">抢购审核({{flash_count}})</a>
                </router-link>
                <br />
                <router-link :to="{name:'team_list',params:{status: 0}}">
                  <a href="javascript:void(0)">拼团审核({{team_activity_count}})</a>
                </router-link>
                <br />
                <router-link :to="{name:'pre_sell',params:{status:0}}">
                  <a href="javascript:void(0)">预售活动({{pre_sell_count}})</a>
                </router-link>
                <br />
              </el-collapse-item>
            </el-collapse>
          </el-dropdown-menu>
        </el-dropdown>
        <div class="manager">
          <!--服务器升级-->
          <textarea id="textarea_upgrade" style="display:none;"></textarea>
          <!--服务器升级 end-->
          <a
            href="http://help.tp-shop.cn/Index/Help/channel/cat_id/5.html"
            class="manual"
            target="_blank"
          >帮助</a>
        </div>
        <div class="operate bgd-opa">
          <span class="bgdopa-t">
            admin
            <i class="opa-arow"></i>
          </span>
          <ul class="bgdopa-list">
            <li style="display: none !important;" tptype="pending_matters">
              <a
                class="toast show-option"
                href="javascript:void(0);"
                onclick="$.cookie('commonPendingMatters', 0, {expires : -1});ajax_form('pending_matters', '待处理事项', 'http://www.baidu.cn', '480');"
                title="查看待处理事项"
              >
                &nbsp;
                <em>0</em>
              </a>
            </li>
            <!-- <li>
							<a class="sitemap show-option" id="trace_show" href="/index.php/admin/System/cleanCache/quick/1" target="workspace">更新缓存</a>
            </li>-->
            <!--<li><a class="switch-smpro" href="http://wx.tp-shop.cn/client"><img src="@/static/images/icon-switch.png" style="margin-top:0;">切换小程序</a></li>-->
            <!-- <li>
							<a class="homepage show-option" target="_blank" href="/">打开商城</a>
            </li>-->
            <li>
              <a
                class="changepasd"
                @click="passwordDialogVisible = true"
                href="javascript:void(0);"
              >修改密码</a>
            </li>
            <li>
              <a class="novice" @click="newDialogVisible = true" href="javascript:void(0);">新手向导</a>
            </li>
            <li>
              <a class="login-out show-option" @click="quit()">退出系统</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="clear"></div>
    </div>

    <el-dialog title="新手向导" :visible.sync="newDialogVisible">
      <el-tabs v-model="activeName">
        <el-tab-pane label="系统设置" name="first">
          <div class="novice-guide-body">
            <h3>基本设置</h3>
            <p>
              基本设置用来设置商城的基本信息，你可以在这里填写商城名称、标志、域名等信息，请务必如实填写
              以免后续造成不良影响。
              <a
                href="#"
                class="fillin"
              >现在填写</a>
            </p>
            <h3>商城装修</h3>
            <p>
              TPshop系统内置了多套精美模版，你可以挑选最喜欢的模板，也可以使用默认模板。
              <a href="#" class="fillin">现在装修</a>
            </p>
          </div>
          <el-row>
            <el-switch
              v-model="open_teach"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
              @change="switchTeach()"
            ></el-switch>下次不再显示此向导
            <el-button type="primary" style="float: right;" @click="activeName = 'second'">下一步</el-button>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="商品数据" name="second">
          <div class="novice-guide-body">
            <h3>商品列表</h3>
            <p>
              通过查看商品列表，可以全面的了解到整个平台商品的大致情况，有利于商家掌控平
              台的运营。
              <a
                href="#"
                class="fillin"
              >现在发布</a>
            </p>
            <h3>商品模型规格</h3>
            <p>
              商品模型和规格可供顾客查看，如鞋子的种类和供客户购买时选择的如码数、颜色等。
              <a href="#" class="fillin">现在添加</a>
            </p>
            <h3>添加品牌</h3>
            <p>
              品牌定位可以有效地建立品牌与竞品的差异性，提升消费者的购买印象。
              <a href="#" class="fillin">现在添加</a>
            </p>
            <h3>设置商家店铺</h3>
            <p>
              通过设置店铺分类和等级等信息，才能建立一个完整的多商家平台中心。
              <a href="#" class="fillin">现在添加</a>
            </p>
          </div>
          <el-row style="float: right;">
            <el-button @click="activeName = 'first'">上一步</el-button>
            <el-button type="primary" @click="activeName = 'third'">下一步</el-button>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="营销推广" name="third">
          <div class="novice-guide-body">
            <h3>促销管理</h3>
            <p>
              通过细心管理商家的各类促销活动，能够让平台店铺流量和销量发展得更加快速。
              <a href="#" class="fillin">现在设置</a>
            </p>
            <h3>广告推广</h3>
            <p>
              精彩的文案和精美的设计广告，能瞬间抓住消费者的眼球，引导其购买。
              <a href="#" class="fillin">现在添加</a>
            </p>
            <h3>分销系统</h3>
            <p>
              设置会员分销体系，通过会员提成激励更多人来推广购买商品。
              <a href="#" class="fillin">现在设置</a>
            </p>
          </div>
          <el-row style="float: right;">
            <el-button @click="activeName = 'second'">上一步</el-button>
            <el-button type="primary" @click="activeName = 'fourth'">下一步</el-button>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="业务管理" name="fourth">
          <div class="novice-guide-body">
            <h3>支付配置</h3>
            <p>
              TPshop系统内置支付宝、微信支付、银联支付等多种支付方式供用户选择。
              <a href="#" class="fillin">现在设置</a>
            </p>
            <h3>SEO设置</h3>
            <p>
              搜索引擎优化设置，是丰富一个综合商城店铺业务流转的重要工具。
              <a href="#" class="fillin">现在设置</a>
            </p>
            <h3>物流设置</h3>
            <p>
              TPshop系统已内置了国内多种主要流物流公司接口，方便商家选择心怡的物流公司。
              <a href="#" class="fillin">现在设置</a>
            </p>
            <h3>订单管理</h3>
            <p>
              商品订单管理可以批量快捷查看商城订单，可以快速查看整个平台的订单情况。
              <a href="#" class="fillin">现在查看</a>
            </p>
          </div>
          <el-row style="float: right;">
            <el-button @click="activeName = 'third'">上一步</el-button>
            <el-button type="primary" @click="activeName = 'five'">下一步</el-button>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="完成" name="five">
          <div class="novice-guide-body">
            <p>恭喜您！您已经完成了商城系统的基本设置，您可以去前台看看购物流程是否顺畅</p>
            <el-row>
              <el-col :span="8">
                <el-card :body-style="{ padding: '0px' }">
                  <div style="padding: 14px;">
                    <span>角色管理</span>
                    <div class="bottom clearfix">
                      <span>有助于商家更合理的分配商城 管理人手，提升管理效率</span>
                    </div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card :body-style="{ padding: '0px' }">
                  <div style="padding: 14px;">
                    <span>会员等级</span>
                    <div class="bottom clearfix">
                      <span>会员等级的设置是一种给会员 成就感和提升黏度的措施</span>
                    </div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card :body-style="{ padding: '0px' }">
                  <div style="padding: 14px;">
                    <span>库存日志</span>
                    <div class="bottom clearfix">
                      <span>分析整个平台商家的库存数据 管控商家销售风险</span>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-card :body-style="{ padding: '0px' }">
                  <div style="padding: 14px;">
                    <span>短信模板</span>
                    <div class="bottom clearfix">
                      <span>您可在后台设置通过短信、邮 件自动发送消息动态给会员</span>
                    </div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card :body-style="{ padding: '0px' }">
                  <div style="padding: 14px;">
                    <span>会员卡</span>
                    <div class="bottom clearfix">
                      <span>设置不同的会员卡和相应的优 惠，能有效促进客户消费</span>
                    </div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card :body-style="{ padding: '0px' }">
                  <div style="padding: 14px;">
                    <span>数据统计</span>
                    <div class="bottom clearfix">
                      <span>流量统计、销售统计、生意分 析等，商城数据一览无余</span>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-card :body-style="{ padding: '0px' }">
                  <div style="padding: 14px;">
                    <span>新闻</span>
                    <div class="bottom clearfix">
                      <span>新闻和文章的编辑，可以提升 整个平台的活跃度</span>
                    </div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="8">
                <el-card :body-style="{ padding: '0px' }">
                  <div style="padding: 14px;">
                    <span>商城装修</span>
                    <div class="bottom clearfix">
                      <span>TPshop后台拥有丰富的装修组 件，发挥想象力自由DIY吧</span>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
          <el-row style="float: right;">
            <el-button @click="activeName = 'fourth'">上一步</el-button>
            <el-button type="primary" @click="newDialogVisible = false">完成</el-button>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <el-dialog title="修改密码" :visible.sync="passwordDialogVisible" width="30%" center>
      <el-form :model="passWordForm" status-icon :rules="rules" ref="passWordForm">
        <el-form-item label="原密码" :label-width="formLabelWidth">
          <el-input v-model="passWordForm.old_password" autocomplete="off" type="password"></el-input>
        </el-form-item>
        <el-form-item label="新密码" :label-width="formLabelWidth">
          <el-input v-model="passWordForm.test_password" autocomplete="off" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" :label-width="formLabelWidth">
          <el-input v-model="passWordForm.new_password" autocomplete="off" type="password"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="passwordDialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="passwordLoading" @click="confirmPassword()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  logout,
  getBaseInfo,
  updatePassword,
  updateOpenTeach,
  getGoodsReport,
  getOrderReport,
  getReturnGoodsReport,
  getStoreApplyCount,
  getStoreReopenCount,
  getStoreBindClassCount,
  getStoreWithdrawalsCount,
  getUserWithdrawalsCount,
  getComplainCount,
  getExposeCount,
  getFlashSaleCount,
  getTeamActivityCount,
  getPreSellCount,
  getConfigs
} from "@/utils/api";
import { removeToken } from "@/utils/auth";
import md5 from "@/utils/md5.js";
export default {
  data() {
    var validateOldPass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入旧密码"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入新密码"));
      } else {
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入新密码"));
      } else if (value !== this.passWordForm.test_password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      activeName: "first",
      newDialogVisible: false,
      passwordDialogVisible: false,
      passWordForm: {
        old_password: "",
        test_password: "",
        new_password: ""
      },
      rules: {
        old_password: [
          {
            validator: validateOldPass,
            trigger: "blur"
          }
        ],
        test_password: [
          {
            validator: validatePass,
            trigger: "blur"
          }
        ],
        new_password: [
          {
            validator: validatePass2,
            trigger: "blur"
          }
        ]
      },
      formLabelWidth: "120px",
      passwordLoading: false,
      open_teach: 0,
      goods_count: 0,
      goods_report: {
        wait_auth_count: 0
      },
      order_report: {
        wait_refund_count: 0
      },
      return_goods_report: {
        wait_refund_count: 0
      },
      store_apply_count: 0,
      store_reopen_count: 0,
      store_bind_class_count: 0,
      store_withdrawals_count: 0,
      user_withdrawals_count: 0,
      complain_count: 0,
      expose_count: 0,
      flash_count: 0,
      team_activity_count: 0,
      pre_sell_count: 0,
      message_count: 0,
      goods_msg_count: 0,
      seller_msg_count: 0,
      user_msg_count: 0,
      activity_count: 0,
      storeLogo: null
    };
  },
  created() {
    this.openTeach();
    this.getReport();
    this.getLogo();
  },
  methods: {
    getLogo() {
      var that = this;
      getConfigs({ inc_type: "shop_info" }).then(function(res) {
        that.storeLogo = res.shop_info.store_logo;
      });
    },
    switchTeach() {
      updateOpenTeach(this.open_teach);
    },
    quit() {
      var that = this;
      logout().then(function(res) {
        if (res.status == 1) {
          removeToken();
          that.$router.push({
            name: "login"
          });
        } else {
          that.$message.error("退出失败，原因:" + res.msg);
        }
      });
    },
    confirmPassword() {
      var that = this;
      this.$refs["passWordForm"].validate(valid => {
        if (valid) {
          that.passwordLoading = true;
          var requestform = {
            old_password: md5("TPSHOP" + that.passWordForm.old_password),
            new_password: md5("TPSHOP" + that.passWordForm.new_password)
          };
          updatePassword(requestform).then(function(res) {
            if (res.status == 1) {
              //修改成功退出重新登录
              that.quit();
            } else {
              that.$message({
                showClose: true,
                message: "修改失败,失败原因:" + res.msg,
                type: "error"
              });
            }
            that.passwordLoading = false;
            that.resetForm("passWordForm");
          });
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    openTeach() {
      var that = this;
      getBaseInfo().then(function(res) {
        that.open_teach = res.open_teach;
        if (res.open_teach) {
          that.newDialogVisible = false;
        } else {
          that.newDialogVisible = true;
        }
      });
    },
    getGoodsReport() {
      var that = this;
      getGoodsReport({}).then(function(res) {
        that.goods_report = res;
        that.getMessageCount();
      });
    },
    getOrderReport() {
      var that = this;
      getOrderReport().then(function(res) {
        that.order_report = res;
        that.getMessageCount();
      });
    },
    getReturnGoodsReport() {
      var that = this;
      getReturnGoodsReport().then(function(res) {
        that.return_goods_report = res;
        that.getMessageCount();
      });
    },
    getStoreApplyCount() {
      var that = this;
      getStoreApplyCount({
        apply_state: 0
      }).then(function(res) {
        that.store_apply_count = res;
        that.getMessageCount();
      });
    },
    getStoreReopenCount() {
      var that = this;
      getStoreReopenCount({
        re_state: 1
      }).then(function(res) {
        that.store_reopen_count = res;
        that.getMessageCount();
      });
    },
    getStoreBindClassCount() {
      var that = this;
      getStoreBindClassCount({
        state: 0
      }).then(function(res) {
        that.store_bind_class_count = res;
        that.getMessageCount();
      });
    },
    getStoreWithdrawalsCount() {
      var that = this;
      getStoreWithdrawalsCount({
        status: 0
      }).then(function(res) {
        that.store_withdrawals_count = res;
        that.getMessageCount();
      });
    },
    getUserWithdrawalsCount() {
      var that = this;
      getUserWithdrawalsCount({
        status: 0
      }).then(function(res) {
        that.user_withdrawals_count = res;
        that.getMessageCount();
      });
    },
    getComplainCount() {
      var that = this;
      getComplainCount({
        complain_state: 1
      }).then(function(res) {
        that.complain_count = res;
        that.getMessageCount();
      });
    },
    getExposeCount() {
      var that = this;
      getExposeCount({
        expose_state: 1
      }).then(function(res) {
        that.expose_count = res;
        that.getMessageCount();
      });
    },
    getFlashSaleCount() {
      var that = this;
      getFlashSaleCount({
        status: 0,
        is_end: 0
      }).then(function(res) {
        that.flash_count = res;
        that.getMessageCount();
      });
    },
    getTeamActivityCount() {
      var that = this;
      getTeamActivityCount({
        status: 0
      }).then(function(res) {
        that.team_activity_count = res;
        that.getMessageCount();
      });
    },
    getPreSellCount() {
      var that = this;
      getPreSellCount({
        status: 0
      }).then(function(res) {
        that.pre_sell_count = res;
        that.getMessageCount();
      });
    },
    getReport() {
      this.getGoodsReport();
      this.getOrderReport();
      this.getReturnGoodsReport();
      this.getStoreApplyCount();
      this.getStoreReopenCount();
      this.getStoreBindClassCount();
      this.getStoreWithdrawalsCount();
      this.getUserWithdrawalsCount();
      this.getComplainCount();
      this.getExposeCount();
      this.getFlashSaleCount();
      this.getTeamActivityCount();
      this.getPreSellCount();
    },
    getMessageCount() {
      this.goods_msg_count =
        this.goods_report.wait_auth_count +
        this.order_report.wait_refund_count +
        this.return_goods_report.wait_refund_count;
      this.seller_msg_count =
        this.store_apply_count +
        this.store_reopen_count +
        this.store_bind_class_count +
        this.store_withdrawals_count;
      this.user_msg_count =
        this.user_withdrawals_count + this.complain_count + this.expose_count;
      this.activity_count =
        this.flash_count + this.team_activity_count + this.pre_sell_count;

      this.message_count =
        this.goods_msg_count +
        this.seller_msg_count +
        this.user_msg_count +
        this.activity_count;
    }
  }
};
</script>

<style scoped>
.topnav {
  width: 100%;
  /* min-width: 1560px; */
  font-size: 14px;
  font-weight: bold;
}

.topnav .leftimg {
  text-align: center;
  cursor: pointer;
  float: left;
  background-color: #2e3c45;
}
.el-dropdown-link {
  cursor: pointer;
  color: #f5f5f5;
}
.el-icon-arrow-down {
  font-size: 12px;
}
>>> .el-collapse {
  border-top: 1px solid #ebeef5;
  border-bottom: 1px solid #ebeef5;
  width: 160px;
}
>>> .el-collapse-item__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 48px;
  line-height: 48px;
  background-color: #1c2024;
  color: #fff;
  cursor: pointer;
  border-bottom: 1px solid #293038;
  font-size: 13px;
  font-weight: 500;
  -webkit-transition: border-bottom-color 0.3s;
  transition: border-bottom-color 0.3s;
  outline: 0;
  margin-left: 15px;
  margin-right: 15px;
}
>>> .el-collapse-item__content {
  padding-bottom: 25px;
  font-size: 13px;
  color: #303133;
  line-height: 1.769230769230769;
  margin-left: 15px;
  background-color: #293038;
}
>>> .el-collapse-item__wrap {
  will-change: height;
  background-color: #293038;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-bottom: 1px solid #293038;
}
>>> .el-collapse {
  border-top: 1px solid #293038;
  border-bottom: 1px solid #293038;
  width: 160px;
}

>>> .el-dropdown-menu {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 0;
  margin: 5px 0;
  background-color: #fff;
  border: 1px solid #293038;
  border-radius: 4px;
  -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

a {
  color: #fff;
  text-decoration: none;
  blr: expression(this.onFocus=this.blur());
}
</style>
